<script setup>
import { Delete, EditPen, Sort } from '@element-plus/icons-vue'
import { ref, computed, onMounted } from 'vue'
import noteRate from '@/views/enterprise/components/noteRate.vue'
import { rsDelete, get_list } from '@/views/enterprise/service/method'
import { enterpriseUpdateRateService } from '@/api/enterprise'
import loading from '@/views/enterprise//service/state.js' // loding状态管理文件
import chat from '@/views/enterprise/service/chat_fun'
import { useEnterpriseStore } from '@/stores'

const enterpriseStore = useEnterpriseStore()
/*修改备注 */
const newNote = ref()
const edit_note = async (id, note) => {
  newNote.value.openNote(id, note)
}
/*rate更新 */
const changeRate = (informationId, rate) => {
  enterpriseUpdateRateService({ informationId, rate })
}
/*删除信息*/
const deleteRS = async (id, name) => {
  await rsDelete(id)
  //删除sortedList对应元素
  const index = sortedList.value.findIndex((item) => item.informationId === id)
  if (index !== -1) {
    // 删除找到的元素——排序
    sortedList.value.splice(index, 1)
    initialList.value.splice(index, 1)
  }
  // 删除知识库里面的文件
  try {
    let filenames = [`${id}_${name}.txt`]
    chat.deleteDocs(enterpriseStore.knowledge_base, filenames)
  } catch (error) {
    console.error('删除信息时发生错误:', error)
    ElMessage({ type: 'error', message: '知识库文件删除失败' })
  }
}

/*排序 */
const sortedList = ref([])
const initialList = ref([])
onMounted(() => {
  loadList()
})
const loadList = async () => {
  initialList.value = await get_list() //自动获取列表数据
  sortedList.value = [...initialList.value] // 初始化时，设置 sortedList 为原始数据
}
const isSorted = ref(false) // 跟踪排序状态
const sortData = () => {
  if (isSorted.value) {
    // 如果已经排序过，则恢复原始顺序
    sortedList.value = [...initialList.value]
  } else {
    // 否则，根据 rate 进行降序排序
    sortedList.value = [...initialList.value].sort((a, b) => b.rate - a.rate)
  }
  // 切换排序状态
  isSorted.value = !isSorted.value
}
//排序切换
const color = ref('grey')
const toggleSort = () => {
  // 切换排序状态并更新表格数据
  sortData()
  color.value = color.value === 'blue' ? 'grey' : 'blue'
}

/*search by name */
const search = ref('')
const filterList = computed(() =>
  sortedList.value.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
)
const columnWidth = '202px'
</script>

<template>
  <layout-com title="简历信息管理">
    <template #extra>
      <el-button @click="loadList" color="#354152" :dark="isDark" round
        >刷新数据</el-button
      >
    </template>
    <!-- 主体部分 -->
    <noteRate ref="newNote" @refresh="loadList"></noteRate>
    <el-table
      :data="filterList"
      size="large"
      :stripe="true"
      v-loading="loading"
    >
      <el-table-column label="序号" prop="informationId" width="120px">
      </el-table-column>
      <el-table-column label="上传者" :width="columnWidth" prop="name" />
      <el-table-column label="简历下载地址" :width="columnWidth">
        <template v-slot="scope">
          <!-- 将 informationFile 属性转换为链接 -->
          <a
            :href="scope.row.informationFile"
            target="_blank"
            class="resume-link"
            >{{ scope.row.informationFile }}</a
          >
        </template>
      </el-table-column>

      <el-table-column label="点击修改备注" :width="columnWidth">
        <template v-slot="scope">
          <div
            class="edit-note"
            @click="edit_note(scope.row.informationId, scope.row.note)"
          >
            <span v-if="scope.row.note">
              {{
                (scope.row.note.length <= 5
                  ? scope.row.note
                  : scope.row.note.substring(0, 5) + '...') || '暂无备注'
              }}
            </span>
            <span v-else>
              {{ '暂无备注' }}<el-icon><EditPen /></el-icon>
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column :width="columnWidth">
        <template #header>
          <label>评级</label>
          <el-icon class="icon" @click="toggleSort" :color="color"
            ><Sort
          /></el-icon>
        </template>
        <template v-slot="scope">
          <el-rate
            v-model="scope.row.rate"
            @change="changeRate(scope.row.informationId, scope.row.rate)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" :width="columnWidth" align="right">
        <template #header>
          <el-input
            v-model="search"
            size="large"
            placeholder="name to search"
          />
        </template>
        <template #default="scope">
          <el-button
            :icon="Delete"
            size="small"
            @click="deleteRS(scope.row.informationId, scope.row.name)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无数据!!!" />
      </template>
    </el-table>
  </layout-com>
</template>

<style lang="scss" scoped>
.el-table {
  height: 570px;
  overflow-y: scroll;
  width: 100%;
}
.resume-link {
  display: inline-block;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.edit-note {
  width: 100px;
  text-align: center;
  border: 1px solid blue;
  border-radius: 5px;
}
.icon {
  position: relative;
  top: +3px;
  left: +5px;
}
.down-label {
  color: rgb(46, 46, 154);
  .downloadAll {
    position: relative;
    left: +5px;
    width: 100px;
  }
}
.down-label:hover {
  filter: brightness(2); /* 增加亮度 1.5 倍 */
}
.column {
  position: relative;
  left: +25px;
}
</style>
@/views/enterprise/service/state
